<template>
	<xn-form-container title="新增还款记录" :width="550" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-form-item label="所属公司" name="deptId">
				<DeptSelect v-model:value="formData.deptId" />
			</a-form-item>
			<a-form-item label="所属项目" name="projectCode">
				<ProjectSelect v-model:value="formData.projectCode" />
			</a-form-item>
			<a-form-item label="欠款人用户编号" name="debtorUserNo">
				<a-input v-model:value="formData.debtorUserNo" placeholder="请输入欠款人用户编号" allow-clear />
			</a-form-item>
			<a-form-item label="还款时间" name="repaymentDate">
				<a-date-picker
					v-model:value="formData.repaymentDate"
					show-time
					value-format="YYYY-MM-DD HH:mm:ss"
					placeholder="请选择还款时间"
					style="width: 100%"
				/>
			</a-form-item>
			<a-form-item label="还款金额" name="repaymentAmount">
				<a-input-number
					v-model:value="formData.repaymentAmount"
					:min="0"
					:precision="2"
					placeholder="请输入还款金额"
					style="width: 100%"
				/>
			</a-form-item>
			<a-form-item label="逾期日期" name="overdueDate">
				<a-date-picker
					v-model:value="formData.overdueDate"
					value-format="YYYY-MM-DD"
					placeholder="请选择逾期日期"
					style="width: 100%"
				/>
			</a-form-item>
			<a-form-item label="逾期天数" name="overdueDays">
				<a-input-number
					v-model:value="formData.overdueDays"
					:min="0"
					placeholder="请输入逾期天数"
					style="width: 100%"
				/>
			</a-form-item>

			<a-form-item label="所属批次" name="batch">
				<a-input v-model:value="formData.batch" placeholder="请输入批次号" allow-clear />
			</a-form-item>
		</a-form>
		<template #footer>
			<a-space>
				<a-button @click="onClose">关闭</a-button>
				<a-button type="primary" @click="handleSubmit" :loading="submitting"> 保存</a-button>
			</a-space>
		</template>
	</xn-form-container>
</template>
<script setup>
	import { ref } from 'vue'
	import { required } from '@/utils/formRules'
	import clientRepaymentApi from '@/api/bi/repayment/client/clientRepaymentApi'
	import DeptSelect from '@/components/Tjzy/Dept/index.vue'
	import ProjectSelect from '@/components/Tjzy/Project/index.vue'
	import { message } from 'ant-design-vue'

	// 组件状态
	const visible = ref(false)
	const submitting = ref(false)
	const formRef = ref()

	// 使用ref创建表单数据
	const formData = ref({
		deptId: null,
		projectCode: null,
		debtorUserNo: '',
		repaymentDate: null,
		repaymentAmount: null,
		overdueDate: null,
		overdueDays: null,
		batch: ''
	})

	// 表单验证规则
	const formRules = {
		deptId: [required('请选择所属公司')],
		projectCode: [required('请选择项目')],
		debtorUserNo: [required('请输入欠款人用户编号')],
		repaymentDate: [required('请选择还款时间')],
		repaymentAmount: [required('请输入还款金额')],
		overdueDate: [required('请选择逾期日期')],
		overdueDays: [required('请输入逾期天数')],
		batch: [required('请输入批次号')]
	}

	// 打开表单
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			formData.value = {
				...record,
				repaymentDate: record.repaymentDate || null,
				overdueDate: record.overdueDate || null
			}
		} else {
			resetForm()
		}
	}

	// 重置表单
	const resetForm = () => {
		formData.value = {
			deptId: null,
			projectCode: null,
			debtorUserNo: '',
			repaymentDate: null,
			repaymentAmount: null,
			overdueDate: null,
			overdueDays: null,
			batch: ''
		}
		formRef.value.clearValidate()
	}

	// 关闭表单
	const onClose = () => {
		resetForm()
		visible.value = false
	}

	// 提交表单
	const handleSubmit = async () => {
		console.log(formData.value)
		try {
			submitting.value = true
			await formRef.value.validate()
			const submitData = {
				...formData.value,
				repaymentAmount: Number(formData.value.repaymentAmount),
				overdueDays: Number(formData.value.overdueDays)
			}
			await clientRepaymentApi.add(submitData)
			onClose()
			emit('successful')
		} catch (error) {
			message.success('操作成功', error.message)
		} finally {
			submitting.value = false
		}
	}

	const emit = defineEmits(['successful'])
	defineExpose({ onOpen })
</script>
